<nc-component v-bind:data="data[index]" class="many-goods-list">

	<!-- 预览 -->
	<template slot="preview">
		<div class="goods-list-preview" v-bind:style="{ marginTop: nc.marginTop + 'px' }">
			<div class="goods-cate-list" v-if="nc.style == 1">
				<template v-for="(item, index) in nc.list">
					<div class="goods-cate-item" :class="{'active': index == 0}">
						<p>{{item.title}}</p>
						<p :style="{background: index == 0 ? nc.selectColor : '' }">{{item.desc}}</p>
					</div>
				</template>
			</div>
			
			<!-- 风格三 -->
			<div class="goods-list single-column goods-list-3" v-if="nc.list[0].goodsStyle == 1">
				<div class="goods-item margin-bottom">
					<div class="goods-img">
						<img src="STATIC_EXT/diyview/img/crack_figure.png">
					</div>
					<div class="info-wrap">
						<div class="name-wrap">
							<div class="goods-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</div>
						</div>
						<div class="info-label">好货上新</div>
						<div class="info-member-label">
							<img src="{$resource_path}/many_goods_list/img/vip.png" />
							<span>会员价</span>
						</div>
						<div class="member-price">￥<span>168.00</span></div>
						<div class="primary-price">￥199.00</div>
						<button class="layui-btn ns-bg-color">加入购物车</button>
					</div>
				</div>
				<div class="goods-item margin-bottom">
					<div class="goods-img">
						<img src="STATIC_EXT/diyview/img/crack_figure.png">
					</div>
					<div class="info-wrap">
						<div class="name-wrap">
							<div class="goods-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</div>
						</div>
						<div class="info-label">好货上新</div>
						<div class="info-member-label">
							<img src="{$resource_path}/many_goods_list/img/vip.png" />
							<span>会员价</span>
						</div>
						<div class="member-price">￥<span>168.00</span></div>
						<div class="primary-price">￥199.00</div>
						<button class="layui-btn ns-bg-color">加入购物车</button>
					</div>
				</div>
				<div class="goods-item margin-bottom">
					<div class="goods-img">
						<img src="STATIC_EXT/diyview/img/crack_figure.png">
					</div>
					<div class="info-wrap">
						<div class="name-wrap">
							<div class="goods-name">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</div>
						</div>
						<div class="info-label">好货上新</div>
						<div class="info-member-label">
							<img src="{$resource_path}/many_goods_list/img/vip.png" />
							<span>会员价</span>
						</div>
						<div class="member-price">￥<span>168.00</span></div>
						<div class="primary-price">￥199.00</div>
						<button class="layui-btn ns-bg-color">加入购物车</button>
					</div>
				</div>
			</div>
		</div>

	</template>

	<!-- 编辑 -->
	<template slot="edit">
		<template v-if="nc.lazyLoad">
			<many-goods-list-style></many-goods-list-style>
		</template>
		
		<template v-if="nc.lazyLoad">
			<many-goods-list></many-goods-list>
		</template>
		
		<template v-if="nc.lazyLoad">
			<!-- <goods-tag-style></goods-tag-style> -->
		</template>

		<div class="template-edit-title"><h3>其他设置</h3></div>
		<!-- <color v-if="nc.style != 3" v-bind:data="{ field : 'backgroundColor', 'label' : '背景颜色' }"></color> -->
		<slide v-bind:data="{ field : 'marginTop', label : '页面间距' }"></slide>

		<!-- 商品组风格弹框 -->
		<div class="goods-cate-style">
			<div class="style-cate-goods layui-form">
				<div class="style-cate-con-goods">
					<div class="style-li-goods" v-bind:class="{'selected ns-border-color': nc.style == 1}">
						<img src="{$resource_path}/many_goods_list/img/cate_style_1.png" />
					</div>
				</div>
				
				<input type="hidden" name="style">
				
			</div>
		</div>

		<!-- 商品分类选择弹框 -->
		<div class="goods-category-layer">
			{notempty name="goods_category_list"}
				<div class="category-head">分类名称</div>
				<div class="category-wrap">
				{foreach name="$goods_category_list" item="vo"}
					<div class="category-item" data-id="{$vo.category_id}">{$vo.category_name}</div>
				{/foreach}
				</div>
			{/notempty}
		</div>
		
		<!-- 商品列表风格弹框 -->
		<div class="goods-list-style">
			<div class="style-list-goods layui-form">
				<div class="style-list-con-goods">
					<div class="style-li-goods" v-bind:class="{'selected ns-border-color': nc.style == 1}">
						<img src="{$resource_path}/many_goods_list/img/style3.png" />
					</div>
				</div>
				
				<input type="hidden" name="style">
				
			</div>
		</div>
	</template>
	
	<!-- 资源 -->
	<template slot="resource">
		<js>
		var goodsListResourcePath = "{$resource_path}";
		</js>
		<css src="{$resource_path}/many_goods_list/css/design.css"></css>
		<js src="{$resource_path}/many_goods_list/js/design.js"></js>
	</template>
	
</nc-component>